<script setup>
// import {
//   requiredValidator,
// } from '@validators'
import { onMounted, onUnmounted, ref } from 'vue'

const props = defineProps({
  isDrawerOpen: {
    type: Boolean,
    required: true,
  },
  operType: {
    type: Number,
    required: true,
    default: 0,
  },
  currRow: Object,
})

const emit = defineEmits([
  'update:isDrawerOpen',
  'addData',
  'updateData',
])

const operType = ref(props.operType)
const currRow = ref(props.currRow)
const row = currRow.value
const isFormValid = ref(false)
const refForm = ref()
const title = ref(operType.value == 0 ? '新增数据源':'更新数据源')

// 表单数据
const id = ref(row.id || '')
const dsBeanName = ref(row.dsBeanName || '')
const dsName = ref(row.dsName || '')
const dsDesc = ref(row.dsDesc || '')
const driverClassName = ref(row.driverClassName || '')
const jdbcUrl = ref(row.jdbcUrl || '')
const username = ref(row.username || '')
const password = ref(row.password || '')
const disabled = ref(row.disabled)
const maximumPoolSize = ref(row.maximumPoolSize)
const minimumIdle = ref(row.minimumIdle)
const idleTimeout = ref(row.idleTimeout)
const connectionTimeout = ref(row.connectionTimeout)
const validationTimeout = ref(row.validationTimeout)
const maxLifetime = ref(row.maxLifetime)
const connectionTestQuery = ref(row.connectionTestQuery)
const connectionInitSql = ref(row.connectionInitSql)
const poolName = ref(row.poolName)
const allowPoolSuspension = ref(row.allowPoolSuspension)
const readOnly = ref(row.readOnly)
const autoCommit = ref(row.autoCommit)
const registerMbeans = ref(row.registerMbeans)



const showPassword = ref(false)

onMounted(() => {

})

onUnmounted(() => {

})

// 👉 drawer close
const closeNavigationDrawer = () => {
  emit('update:isDrawerOpen', false)
  nextTick(() => {
    refForm.value?.reset()
    refForm.value?.resetValidation()
  })
}

const onSubmit = () => {
  refForm.value?.validate().then(({ valid }) => {
    if(valid) {
      const data = {
        id: id.value,
        dsBeanName: dsBeanName.value,
        dsName: dsName.value,
        dsDesc: dsDesc.value,
        driverClassName: driverClassName.value,
        jdbcUrl: jdbcUrl.value,
        username: username.value,
        password: password.value,
        disabled: disabled.value,
        maximumPoolSize: maximumPoolSize.value,
        minimumIdle: minimumIdle.value,
        idleTimeout: idleTimeout.value,
        connectionTimeout: connectionTimeout.value,
        validationTimeout: validationTimeout.value,
        maxLifetime: maxLifetime.value,
        connectionTestQuery: connectionTestQuery.value,
        connectionInitSql: connectionInitSql.value,
        poolName: poolName.value,
        allowPoolSuspension: allowPoolSuspension.value,
        readOnly: readOnly.value,
        autoCommit: autoCommit.value,
        registerMbeans: registerMbeans.value,
      }

      if(operType.value == 0){
        emit('addData', data)
      }else{
        emit('updateData', data)
      }
      
      emit('update:isDrawerOpen', false)
      nextTick(() => {
        refForm.value?.reset()
        refForm.value?.resetValidation()
      })
    }
  })
}

const handleDrawerModelValueUpdate = val => {
  emit('update:isDrawerOpen', val)
}
</script>

<template>
  <VNavigationDrawer
    temporary
    style="inline-size: 1120px;"
    location="end"
    class="scrollable-content"
    :model-value="props.isDrawerOpen"
    @update:model-value="handleDrawerModelValueUpdate"
  >
    <AppDrawerHeaderSection
      :title="title"
      @cancel="closeNavigationDrawer"
    />

    <!-- <PerfectScrollbar :options="{ wheelPropagation: false }"> -->
    <VCard
      flat
      style="overflow-y: auto;"
    >
      <VCardText>
        <VForm
          ref="refForm"
          v-model="isFormValid"
          @submit.prevent="onSubmit"
        >
          <VRow>
            <VCol cols="12">
              <VTextField
                v-model="dsBeanName"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="Bean名称"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="dsName"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="数据源中文名称"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="dsDesc"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="描述信息"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="driverClassName"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="数据库驱动路径"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="jdbcUrl"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="数据库连接路径"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="username"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="用户名"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="password"
                :append-inner-icon="show1 ? 'tabler-eye-off' : 'tabler-eye' "
                :type="showPassword ? 'text' : 'password'"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="密码"
                clearable
                @click:append-inner="showPassword = !showPassword"
              />
            </VCol>

            <VCol cols="12">
              <VCheckbox
                v-model="disabled"
                class="setting-mb-12"
                label="是否禁用"
                clearable
              />
            </VCol>
            <VCol cols="12">
              以下为Hikar配置(非必填)
            </VCol>
            <VCol cols="12">
              <VTextField
                v-model="maximumPoolSize"
                class="setting-mb-12"
                label="连接池的最大连接数(maximumPoolSize)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="minimumIdle"
                class="setting-mb-12"
                label="连接池的最小空闲连接数(minimumIdle)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="idleTimeout"
                class="setting-mb-12"
                label="连接在池中保持空闲的最大时间，超过这个时间会被释放(idleTimeout)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="connectionTimeout"
                class="setting-mb-12"
                label="获取连接的超时时间(connectionTimeout)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="validationTimeout"
                class="setting-mb-12"
                label="在连接池中进行连接有效性验证的超时时间(validationTimeout)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="maxLifetime"
                class="setting-mb-12"
                label="连接在池中允许存活的最长时间(maxLifetime)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="connectionTestQuery"
                class="setting-mb-12"
                label="用于测试连接是否有效的SQL查询语句(connectionTestQuery)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="connectionInitSql"
                class="setting-mb-12"
                label="在连接被添加到连接池之前执行的SQL语句(connectionInitSql)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="poolName"
                class="setting-mb-12"
                label="连接池的名称(poolName)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="allowPoolSuspension"
                class="setting-mb-12"
                label="是否允许连接池暂停(allowPoolSuspension)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="readOnly"
                class="setting-mb-12"
                label="连接是否只读(readOnly)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="autoCommit"
                class="setting-mb-12"
                label="是否自动提交(autoCommit)"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VTextField
                v-model="registerMbeans"
                class="setting-mb-12"
                label="是否注册MBeans(registerMbeans)"
                clearable
              />
            </VCol>

            <VCol cols="6">
              <VBtn
                type="submit"
                class="me-3 w-100"
              >
                提交
              </VBtn>
            </VCol>
            <VCol cols="6">
              <VBtn
                class="w-100"
                type="reset"
                variant="tonal"
                color="secondary"
                @click="closeNavigationDrawer"
              >
                取消
              </VBtn>
            </VCol>
          </VRow>
        </VForm>
      </VCardText>
    </VCard>
    <!-- </PerfectScrollbar> -->
  </VNavigationDrawer>
</template>

<style scoped>
.w-100 {
  inline-size: 100%;
}
</style>
